<template>
  <div class="message">
    <van-nav-bar
        title="信息列表"
        left-arrow
        @click-left="$router.push('/index')"
    />

    <!-- tabbar -->
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item>全部</van-tabbar-item>
      <van-tabbar-item>系统消息</van-tabbar-item>
      <van-tabbar-item>个人消息</van-tabbar-item>
    </van-tabbar>

    <!-- 根据active的值展示信息列表 -->
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <cell
          v-for="item in (active===1?systemMessage:(active===2?userMessage:allMessage))"
          :message="item"
      ></cell>
    </van-list>
     <!--messageDetaill -->
    <transition name="van-slide-right">
      <MessageDetail  v-if="$route.fullPath!=='/message'">

      </MessageDetail>
    </transition>

  </div>
</template>

<script>
import cell from "@/components/MessageCell";
import {GetAllMessage} from "@/request/api";
import MessageDetail from "@/components/MessageDetail";


export default {
  data() {
    return {
      active: 0,
      //van-list
      loading: false,
      finished: false,
      //请求参数
      current: 1,
      size: 10,
      type: 0, //message type: 0全部, 1系统, 2个人
      total: 0, //记录请求中所有的数据数量


      //传给cell的数据
      allMessage: [],
      systemMessage: [],
      userMessage: []
    }
  },
  computed: {},
  methods: {
    onChange() {
      // console.log(this.active)
    },
    onLoad() {
      GetAllMessage({
        current: this.current++,
        size: this.size,
        type: this.type
      }).then(res => {
        console.log(res);
        //更新数据
        res.data.records.forEach(item => {
          switch (item.type) {
            case 1:
              this.systemMessage.push(item);
              this.allMessage.push(item)
              break;
            case 2:
              this.userMessage.push(item);
              this.allMessage.push(item);
              break;
          }
        });
        this.loading=false;
        //判断何时获取到所有数据
        if (this.allMessage.length === this.total) {
          this.finished=true;
        }
      });
    }

  },
  created() {
    GetAllMessage({
      current: this.current++,
      size: this.size,
      type: this.type
    }).then(res => {
      // console.log(res);
      this.total = res.data.total;
      res.data.records.forEach(item => {
        switch (item.type) {
          case 1:
            this.systemMessage.push(item);
            this.allMessage.push(item)
            break;
          case 2:
            this.userMessage.push(item);
            this.allMessage.push(item);
            break;
        }
      });

    });
  },
  components: {
    cell,
    MessageDetail
  }

}
</script>

<style scoped lang="less">
.message {
  font-size: 0.16rem;
  background-color: #cfcfcf;
}

.van-nav-bar {
  background-color: rgb(33, 54, 147);

  /deep/ i:before {
    color: white;
  }
}

/deep/ .van-tabbar--fixed {
  bottom: auto;
}

.van-tabbar-item {
  font-size: 18px;
}

.van-list {
  margin-top: 60px
}

.cell {
  background-color: #fff;
}

</style>